// -----------------------------------------------------------------------------
// This file contains all application-wide Sass mixins.
// -----------------------------------------------------------------------------

/// @type Display Model
@mixin flex-centering() {
    display: flex;
    align-items: center;
    justify-content: center;
}

@mixin flex-centering-vertical() {
    display: flex;
    align-items: center;
}

@mixin flex-centering-horizontal() {
    display: flex;
    justify-content: center;
}

/// @type Box
@mixin square($dimension) {
    width: $dimension;
    height: $dimension;
}

@mixin circle($dimension) {
    width: $dimension;
    height: $dimension;
    border-radius: 50%;
}

@mixin size($size) {
    width: $size;
    height: $size;
}

/// @type Text
@mixin truncate() {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

@mixin reset-truncate() {
    white-space: inherit;
    text-overflow: inherit;
    overflow: visible;
}

@mixin animated-truncate() {
    position: relative;
    margin-right: 18px;

    &::after {
        position: absolute;
        content: "\2026";
        display: inline-block;
        overflow: hidden;
        width: 0;
        margin-left: 3px;
        animation: ellipsis steps(4, end) 1.5s infinite;
        vertical-align: bottom;
        top: 0;
    }
}

@keyframes ellipsis {
    to {
        width: 1.25rem;
    }
}

/// @type Other
@mixin transition($what: all, $time: 0.3s, $how: ease) {
    transition: $what $time $how;
}

@mixin hidden() {
    position: absolute;
    top: -9999px;
    left: -9999px;
}

@mixin drop-shadow-default() {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 8%), 0 2px 1px rgba(0, 0, 0, 6%), 0 1px 3px rgba(0, 0, 0, 10%);
}

/**
* @description Resets the default button styles
* @example @include reset-button;
*/
@mixin reset-button() {
    padding: 0;
    outline: none;
    line-height: unset;
    color: $color-darkgray-200;
    border: none;
    background: none;
    cursor: pointer;

    &.mt-button:hover:not(.mt-button--disabled),
    &.mt-button:hover:not([disabled]) {
        background: transparent;
        border-color: transparent;
    }
}
